<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- TDK三大标签 是每一个网站必备的 T title  D description  K keywords -->
    <title>⼩兔鲜⼉ - 新鲜 惠⺠ 快捷！</title>
    <meta name="description" content="⼩兔鲜⼉,⻝品,⽣鲜,服装,家电,电商,购物">
    <meta name="keywords" content="⼩兔鲜⼉官⽹，致⼒于打造全球最⼤的⻝品、⽣鲜电商购物平台。">
    <!-- 引入 网站图标 文件 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入 base.css 文件 -->
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--页面的头部制作-->
<header>
    <div class="top-nav">
        <div class="container clearfix">
            <ul>
                <li>|
                    <a href="#">
                        <span class="iconfont" style="font-size: 14px;">&#xe607;&nbsp;</span>手机版
                    </a>
                </li>
                <li>|<a href="#">在线客服</a></li>
                <li>|<a href="#">帮助中心</a></li>
                <li>|<a href="#">会员中心</a></li>
                <li>|<a href="#">我的订单</a></li>
                <li>|<a href="#">免费注册</a></li>
                <li><a href="#">请先登录</a></li>
            </ul>
        </div>
    </div>
    <div class="bottom-nav">
        <div class="container clearfix">
            <a href="#" class="logo"></a>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
            <div class="clearfix" style="float: right;">
                <div class="search">
                    <input type="search" placeholder="搜一搜">
                </div>
                <a href="#" class="shopping"></a>
            </div>


        </div>
    </div>
</header>
<!--轮播图导航栏-->
<nav class="min-width">
    <section class="container carousel">
        <ul class="carousel-images">
            <li>
                <img src="uploads/banner_1.png" alt="banners">
            </li>
            <li>
                <img src="uploads/banner_1.png" alt="banners">
            </li>
            <li>
                <img src="uploads/banner_1.png" alt="banners">
            </li>
        </ul>
        <div class="main-nav">
            <ol>
                <li><a href="#"><span>生鲜&nbsp;&nbsp;</span>水果 蔬菜</a></li>
                <li><a href="#"><span>美食&nbsp;&nbsp;</span>面点 干果</a></li>
                <li><a href="#"><span>餐厨&nbsp;&nbsp;</span>水果 蔬菜</a></li>
                <li><a href="#"><span>电器&nbsp;&nbsp;</span>床品 四件套 被枕</a></li>
                <li><a href="#"><span>家具&nbsp;&nbsp;</span>奶粉 玩具 辅食</a></li>
                <li><a href="#"><span>孕婴&nbsp;&nbsp;</span>洗发 洗护 美妆</a></li>
                <li><a href="#"><span>杂物&nbsp;&nbsp;</span>奶粉 玩具</a></li>
                <li><a href="#"><span>服饰&nbsp;&nbsp;</span>女装 男装</a></li>
                <li><a href="#"><span>品牌&nbsp;&nbsp;</span>户外 图书</a></li>
                <li><a href="#"><span>居家&nbsp;&nbsp;</span>品牌制造</a></li>
            </ol>
        </div>
        <div class="pre">
            <div class="pre-img"></div>
        </div>
        <div class="next">
            <div class="next-img"></div>
        </div>
        <ul class="dots">
            <li></li>
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</nav>
<!--内容区域-->
<div class="content">
    <div class="recommend min-width">
        <div class="fresh-thing container">
            <div class="describe clearfix">
                <div>
                    <h4>新鲜好物</h4>
                    <span>新鲜出炉 品质靠谱</span>
                    <a class="more" href="#">查看全部</a>
                </div>
            </div>
            <div class="goods1 clearfix">
                <ul class="clearfix">
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/new_goods_1.jpg" alt="goods">
                                <div class="new">新<br>品</div>
                            </div>
                            <div class="goods-price">
                                <div class="goods-title">睿米无线吸尘器F8</div>
                                <div class="price">899</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/new_goods_2.jpg" alt="goods">
                                <div class="new">新<br>品</div>
                            </div>
                            <div class="goods-price">
                                <div class="goods-title">智能环绕3D空调</div>
                                <div class="price">1299</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/new_goods_3.jpg" alt="goods">
                                <div class="new">新<br>品</div>
                            </div>
                            <div class="goods-price">
                                <div class="goods-title">广东软软糯米煲仔饭</div>
                                <div class="price">129</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/new_goods_4.jpg" alt="goods">
                                <div class="new">新<br>品</div>
                            </div>
                            <div class="goods-price">
                                <div class="goods-title">罗西机械智能手表</div>
                                <div class="price">3399</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="popular container">
            <div class="describe clearfix">
                <div>
                    <h4>人气推荐</h4>
                    <span>人气爆款 不容错过</span>
                    <!--<a class="more" href="#">查看全部</a>-->
                </div>
            </div>
            <div class="goods1 clearfix">
                <ul class="clearfix">
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/popular_1.jpg" alt="goods">
                            </div>
                            <div class="goods-info">
                                <div class="goods-title">特惠推荐</div>
                                <div class="font-style">我猜得到 你的需要</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/popular_2.jpg" alt="goods">
                            </div>
                            <div class="goods-info">
                                <div class="goods-title">爆款推荐</div>
                                <div class="font-style">人气好物推荐</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/popular_3.jpg" alt="goods">
                            </div>
                            <div class="goods-info">
                                <div class="goods-title">场景使用一站买全</div>
                                <div class="font-style">编辑精心整理推荐</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="drift" href="#">
                            <div class="goods-img">
                                <img src="uploads/popular_4.jpg" alt="goods">
                            </div>
                            <div class="goods-info">
                                <div class="goods-title">领券中心</div>
                                <div class="font-style">发现更多超值优惠券</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--底部制作-->
<footer>
    <div class="contact container">
        <ul>
            <li>
                <h4>客户服务</h4>
                <div class="online-service box">
                    <a href="#">在线客服</a>
                </div>
                <div class="feedback box">
                    <a href="#">问题反馈</a>
                </div>
            </li>
            <li>
                <h4>关注我们</h4>
                <div class="official box">
                    <a href="#">公众号</a>
                </div>
                <div class="blog box">
                    <a href="#">微博</a>
                </div>
            </li>
            <li class="app">
                <h4>下载APP</h4>
                <div class="qrcode">
                    <a href="#"><img src="./uploads/qrcode.png" alt="qrcode"></a>
                </div>
                <div class="app-download">
                    <p>
                        扫描二维码<br>
                        立即下载APP
                    </p>
                    <button>下载页面</button>
                </div>
            </li>
            <li class="contact-number">
                <h4>服务热线</h4>
                <p>400-0000-000</p>
                <p>周一至周日 8:00-18:00</p>
            </li>
        </ul>
    </div>
    <div class="about">
        <ul class="intro container">
            <li><span>占位 </span>价格亲民</li>
            <li><span>占位 </span>物流快捷</li>
            <li><span>占位 </span>品质新鲜</li>
        </ul>
        <div class="links container">
            <ul class="clearfix">
                <li><a href="#">关于我们</a></li>
                <li>|<a href="#">帮助中心</a></li>
                <li>|<a href="#">售后服务</a></li>
                <li>|<a href="#">配送与验收</a></li>
                <li>|<a href="#">商务合作</a></li>
                <li>|<a href="#">搜索推荐</a></li>
                <li>|<a href="#">友情链接</a></li>
            </ul>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>
</footer>
</body>
</html>